<template>
	<view class="login-container">
		<view class="login-item">
			<text>账号:</text>
			<input type="text" @input="onAccount" placeholder="添加账号" />
		</view>
		<view class="login-item">
			<text>密码:</text>
			<input class="uni-input" password type="text" placeholder="请输入密码" @input="onPassword" />
		</view>
		<view>
			<button type="primary" @click="getRegister">注册</button>
		</view>
	</view>
</template>

<script>
	import service from '../../utils/http.js'
	import md5 from 'js-md5';
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				Account: '',
				Password: ''
			};
		},
		methods: {
			...mapMutations('m_user', ['updateUserinfo']),
			//获取账号信息
			onAccount(event) {
				this.Account = event.detail.value
				// console.log(this.Account)
			},
			//获取密码信息
			onPassword(event) {
				let password = event.detail.value
				this.Password = md5(password)
				// console.log(this.Password)
			},
			//注册账号信息
			async getRegister() {
				if (this.Account == '') {
					uni.$showMsg('账号不能为空')
					return
				}
				//校验密码信息
				if (this.Password == '') {
					uni.$showMsg('密码不能为空')
					return
				}
				service.post('/api/Users?sname='+this.Account+'&password='+this.Password)
					.then(response => {
						// console.log('response', response)
						if (response.Code == '0') {
							uni.$showMsg(response.Data)
							return
						}
						if (response.Code == '1') {
							this.updateUserinfo(JSON.parse(response.Data))
							uni.switchTab({
								url: '/pages/home/home'
							})
						}
					})
					.catch(function(error) { // 请求失败处理
						console.log(error);
						uni.$showMsg(error)
					});
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		margin: 10px 20px 0px 20px; //上 左 下 右
		padding: 20px;
		font-size: 14px;
		line-height: 24px;

		.login-item {
			display: flex;
			flex-direction: row;
			margin-bottom: 10px;
		}
	}
</style>